<template>
	<view class="container container336462">
		<diy-navbar :isFixed="true" backUrl="/pages/index" bgColor="gradual-blue" :isHome="true" :isBack="true">
			<!-- #ifndef VUE3 -->
			<block slot="backText"> 返回 </block>
			<block slot="content"> 添加活动 </block>
			<!-- #endif -->
			<!-- #ifdef VUE3 -->
			<template v-slot:backText> 返回 </template>
			<template v-slot:content> 添加活动 </template>
			<!-- #endif -->
		</diy-navbar>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex38-clz">
			<view class="flex flex-wrap diygw-col-24 items-center flex14-clz">
				<view class="diygw-form-item diygw-col-24 noborder">
					<view class="title"> 活动名称 </view>
					<view class="input solid">
						<input class="flex1" name="formdataname" comfirm-type="done" type="text" v-model="formdataname" placeholder="请输入提示信息" />
					</view>
				</view>
<!-- 				<view class="flex flex-wrap diygw-col-24">
					<view class="flex flex-wrap diygw-col-8 flex-direction-column justify-start">
						<view class="diygw-form-item diygw-form-item-small diygw-col-24 noborder">
							<view class="input flex flex-wrap">
								<view class="upload imageimage" v-for="(item, index) in imageDatas">
									<image class="image imageimage" @tap="previewImage" :src="item" :data-url="item" mode="aspectFill"></image>
									<text class="diy-icon-close" :data-index="index" @tap="delImage"></text>
								</view>
								<view class="upload imageimage" v-if="imageDatas.length < 6" @tap="uploadImage">
									<image class="imageimage" src="/static/upload.png"></image>
								</view>
								<input hidden :value="image" name="image" maxlength="-1" />
							</view>
						</view>
					</view>
				</view> -->
				<view class="diygw-form-item diygw-col-24 noborder">
					<view class="title"> 活动类型 </view>
					<view class="input solid">
						<picker @change="changeFormdatasource" :value="formdatasourceIndex" :range="formdatasourceDatas" range-key="label">
							<view class="picker-item" v-if="formdatasourceIndex >= 0">
								{{ formdatasourceDatas[formdatasourceIndex].label }}
							</view>
							<view class="picker-item" v-else> 请选择来源 </view>
						</picker>
						<input hidden type="hidden" name="formdatasourceIndex" :value="formdatasourceIndex" />
						<input hidden type="hidden" name="formdatasource" :value="formdatasource" />
						<input hidden type="hidden" name="formdatasourceLabel" :value="formdatasourceLabel" />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24 noborder">
					<view class="title"> 活动商品 </view>
					<view class="input solid">
						<picker @change="changeFormdatacategory" :value="formdatacategoryIndex" :range="formdatacategoryDatas" range-key="label">
							<view class="picker-item" v-if="formdatacategoryIndex >= 0">
								{{ formdatacategoryDatas[formdatacategoryIndex].label }}
							</view>
							<view class="picker-item" v-else> 请选择分类 </view>
						</picker>
						<input hidden type="hidden" name="formdatacategoryIndex" :value="formdatacategoryIndex" />
						<input hidden type="hidden" name="formdatacategory" :value="formdatacategory" />
						<input hidden type="hidden" name="formdatacategoryLabel" :value="formdatacategoryLabel" />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24">
					<view class="title"> 开始时间 </view>
					<view class="input">
						<picker name="formdatabuy_at" @change="changeFormdatabuy_at" :value="formdatabuy_at" mode="date">
							<view class="picker-item" v-if="formdatabuy_at">
								{{ formdatabuy_at }}
							</view>
							<view class="picker-item placeholder" v-else> 请选择 </view>
						</picker>
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24">
					<view class="title"> 结束时间 </view>
					<view class="input">
						<picker name="formdatabuy_at" @change="changeFormdatabuy_at" :value="formdatabuy_at" mode="date">
							<view class="picker-item" v-if="formdatabuy_at">
								{{ formdatabuy_at }}
							</view>
							<view class="picker-item placeholder" v-else> 请选择 </view>
						</picker>
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24 noborder">
					<view class="title"> 参与门店 </view>
					<view class="input solid">
						<picker @change="changeSct" :value="sctIndex" :range="sctDatas" range-key="label">
							<view class="picker-item" v-if="sctIndex >= 0">
								{{ sctDatas[sctIndex].label }}
							</view>
							<view class="picker-item" v-else> 请选择分类 </view>
						</picker>
						<input hidden type="hidden" name="sctIndex" :value="sctIndex" />
						<input hidden type="hidden" name="sct" :value="sct" />
						<input hidden type="hidden" name="sctLabel" :value="sctLabel" />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-12 noborder">
					<view class="title"> 数量 </view>
					<view class="input solid">
						<input class="flex1" name="input" comfirm-type="done" type="text" v-model="input" placeholder="" />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-12 noborder">
					<view class="title"> 次数限制 </view>
					<view class="input solid">
						<input class="flex1" name="input1" comfirm-type="done" type="text" v-model="input1" placeholder="" />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24 noborder">
					<view class="title"> 门店限制 </view>
					<view class="input solid">
						<picker @change="changeSct1" :value="sct1Index" :range="sct1Datas" range-key="label">
							<view class="picker-item" v-if="sct1Index >= 0">
								{{ sct1Datas[sct1Index].label }}
							</view>
							<view class="picker-item" v-else> 请选择分类 </view>
						</picker>
						<input hidden type="hidden" name="sct1Index" :value="sct1Index" />
						<input hidden type="hidden" name="sct1" :value="sct1" />
						<input hidden type="hidden" name="sct1Label" :value="sct1Label" />
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 justify-start flex15-clz">
					<text class="diygw-text-line1 diygw-col-0 text1-clz"> 备注 </text>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex-direction-column flex20-clz">
					<view class="diygw-form-item diygw-col-24">
						<view class="input">
							<textarea maxlength="200" class="flex1 formdataremark" name="formdataremark" v-model="formdataremark" placeholder="请输入备注信息"></textarea>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom">
			<view class="flex diygw-col-24">
				<button @tap="navigateTo" data-type="saveFunction" class="diygw-btn cyan radius-xl flex-sub margin-xs button-button-clz">取消</button>
				<button style="color: #fbf7f7 !important" @tap="navigateTo" data-type="page" data-url="/pages/index" class="diygw-btn gradual-blue radius-xl flex-sub margin-xs button-button-clz">保存</button>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				formdataname: '',
				imageListDatas: [],
				imageDatas: [],
				image: '',
				formdatasourceDatas: [
					{ value: '1', label: '促销活动' },
					{ value: '2', label: '免费活动' },
					{ value: '3', label: '平台3' },
					{ value: '4', label: '活动商品' },
					{ value: '5', label: '门店商品' }
				],
				formdatasourceIndex: 0,
				formdatasource: '1',
				formdatasourceLabel: '促销活动',
				formdatacategoryDatas: [
					{ value: '1', label: '保健品' },
					{ value: '2', label: '生活用品' },
					{ value: '3', label: '蔬菜水果' }
				],
				formdatacategoryIndex: 0,
				formdatacategory: 1,
				formdatacategoryLabel: '保健品',
				formdatabuy_at: '',
				sctDatas: [
					{ value: '1', label: '保健品' },
					{ value: '2', label: '生活用品' },
					{ value: '3', label: '蔬菜水果' }
				],
				sctIndex: 0,
				sct: 1,
				sctLabel: '保健品',
				input: 1000,
				input1: 1,
				sct1Datas: [
					{ value: '1', label: '是' },
					{ value: '2', label: '否' }
				],
				sct1Index: 0,
				sct1: 1,
				sct1Label: '是',
				formdataremark: ''
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			async uploadImage(e) {
				await this.uploadImage(this, 'image', 'imageDatas', '');
			},
			delImage(evt) {
				let { index } = evt.currentTarget.dataset;
				let imageDatas = this.imageDatas;
				imageDatas.splice(index, 1);
				let image = imageDatas.join(',');
				this.imageDatas = imageDatas;
				this.image = image;
			},
			previewImage(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url, // 当前显示图片的http链接
					urls: this.imageDatas // 需要预览的图片http链接列表
				});
			},
			changeFormdatasource(evt) {
				let formdatasourceIndex = evt.detail.value;
				let formdatasourceDatas = this.formdatasourceDatas;
				let formdatasourceLabel = formdatasourceDatas[formdatasourceIndex].label;
				let formdatasource = formdatasourceDatas[formdatasourceIndex].value;
				this.formdatasourceIndex = formdatasourceIndex;
				this.formdatasourceLabel = formdatasourceLabel;
				this.formdatasource = formdatasource;
			},
			changeFormdatacategory(evt) {
				let formdatacategoryIndex = evt.detail.value;
				let formdatacategoryDatas = this.formdatacategoryDatas;
				let formdatacategoryLabel = formdatacategoryDatas[formdatacategoryIndex].label;
				let formdatacategory = formdatacategoryDatas[formdatacategoryIndex].value;
				this.formdatacategoryIndex = formdatacategoryIndex;
				this.formdatacategoryLabel = formdatacategoryLabel;
				this.formdatacategory = formdatacategory;
			},
			changeFormdatabuy_at(evt) {
				this.formdatabuy_at = evt.detail.value;
			},
			changeSct(evt) {
				let sctIndex = evt.detail.value;
				let sctDatas = this.sctDatas;
				let sctLabel = sctDatas[sctIndex].label;
				let sct = sctDatas[sctIndex].value;
				this.sctIndex = sctIndex;
				this.sctLabel = sctLabel;
				this.sct = sct;
			},
			changeSct1(evt) {
				let sct1Index = evt.detail.value;
				let sct1Datas = this.sct1Datas;
				let sct1Label = sct1Datas[sct1Index].label;
				let sct1 = sct1Datas[sct1Index].value;
				this.sct1Index = sct1Index;
				this.sct1Label = sct1Label;
				this.sct1 = sct1;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex38-clz {
		background-color: #f0f0f0;
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex14-clz {
		padding-top: 40rpx;
		border-bottom-left-radius: 20rpx;
		padding-left: 0rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 20rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		margin-left: 20rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 20rpx;
		margin-top: 0rpx;
		border-bottom-right-radius: 20rpx;
		margin-bottom: 10rpx;
		padding-right: 0rpx;
	}
	.formdataname_clz {
		border-radius: 10rpx !important;
	}
	.imageimage {
		width: 100px;
		height: 120px;
	}
	.formdatasource_clz {
		border-radius: 10rpx !important;
	}
	.formdatacategory_clz {
		border-radius: 10rpx !important;
	}
	.sct_clz {
		border-radius: 10rpx !important;
	}
	.input_clz {
		border-radius: 10rpx !important;
	}
	.input1_clz {
		border-radius: 10rpx !important;
	}
	.sct1_clz {
		border-radius: 10rpx !important;
	}
	.flex15-clz {
		margin-left: 30rpx;
		padding-top: 10rpx;
		z-index: 1;
		color: #f30b0b;
		font-weight: bold;
		padding-left: 30rpx;
		width: calc(100% - 30rpx - 30rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 30rpx;
		padding-right: 30rpx;
	}
	.text1-clz {
		background-color: #ffffff;
		padding-top: 6rpx;
		padding-left: 20rpx;
		padding-bottom: 6rpx;
		padding-right: 20rpx;
	}
	.flex20-clz {
		margin-left: 30rpx;
		border: 2rpx solid #eee;
		border-bottom-left-radius: 20rpx;
		overflow: hidden;
		width: calc(100% - 30rpx - 30rpx) !important;
		border-top-left-radius: 20rpx;
		margin-top: -30rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		margin-bottom: 10rpx;
		margin-right: 30rpx;
	}
	.formdataremark {
		height: 60px !important;
	}
	.flex2-clz {
		left: 0rpx;
		bottom: 0rpx;
	}
	.button-button-clz {
		margin: 6rpx !important;
	}
	.container336462 {
	}
</style>
